<template>
    <el-container>
        <el-header v-if="!isDisabled">
            <el-button
                    @click="item_moveUp"
                    v-if="itemIndex !== 0"
                    type="primary"
                    icon="el-icon-upload2"
                    circle></el-button>
            <el-button
                    @click="item_moveDown"
                    v-if="itemIndex !== answerCount-1"
                    type="success"
                    icon="el-icon-download"
                    circle></el-button>
            <el-button
                    @click="item_delQuestion"
                    type="danger"
                    icon="el-icon-delete"
                    circle></el-button>
        </el-header>
        <el-main>
            <el-form
                    ref="dataForm"
                    :model="item_que"
                    label-position="center"
                    label-width="130px"
                    :class="[isDisabled?'normal':'no_normal']"
            >
                <svg-icon v-if="item_que.required === 1" icon-class="必填" style="width:32px;height:32px;float: left;margin-right:5px"></svg-icon>
                <p style="font-size: 18px;color: #3b91b6">单选题</p>
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item
                                label="排序："
                                prop="viewSort"
                        >
                            <el-input  v-model="item_que.viewSort"  type="text" placeholder="问题序号,如1/I/一/①..." class="inputBox" :disabled="isDisabled"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item
                                label="问题描述："
                                prop="title"
                        >
                            <el-input  v-model="item_que.title"  type="text" placeholder="问题描述..." class="inputBox" :disabled="isDisabled"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item
                        label="问题备注："
                        prop="description"
                >
                    <el-input  v-model="item_que.description"  type="text" placeholder="问题备注..." class="inputBox" :disabled="isDisabled"></el-input>
                </el-form-item>

                <el-form-item
                        label="选项："
                        v-if="isDisabled"
                >
                    <el-radio disabled v-for="(option, index) in item_que.options"
                              :label="option.label"
                              v-if="option.isOther === 0"
                              v-model="deflutOp_show"
                    >{{option.label}}</el-radio>

                </el-form-item>
                <el-form-item
                        label="用户自定义填写："
                        v-if="haveOther && isDisabled"
                >
                    {{this.op_Other.label}}
                </el-form-item>

                <div v-if="!isDisabled">
                    <el-form-item
                            v-for="(option, index) in item_que.options"
                            :label="'选项' + (index+1)"
                            :prop="'options.' + index + '.value'"

                    >
                        <el-row :gutter="10">
                            <el-col :span="14">
                                <el-input size="small" v-model="option.label"></el-input>
                            </el-col>
                            <el-col :span="10">
                                <el-popconfirm
                                        confirmButtonText='好的'
                                        cancelButtonText='不用了'
                                        icon="el-icon-info"
                                        iconColor="red"
                                        title="确定删除吗?"
                                        @onConfirm="removeOp(option)"
                                >
                                    <el-button type="danger"
                                               icon="el-icon-delete"
                                               circle
                                               slot="reference"></el-button>
                                </el-popconfirm>
                                <el-popconfirm
                                        confirmButtonText='好的'
                                        cancelButtonText='不用了'
                                        icon="el-icon-info"
                                        iconColor="red"
                                        title="此选项设为默认选中?"
                                        @onConfirm="deflutOp(option)"
                                        v-if="option.status !==2"
                                >
                                    <el-button type="primary"
                                               icon="el-icon-check"
                                               circle
                                               slot="reference"></el-button>
                                </el-popconfirm>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="addOp">新增选项</el-button>
                        <el-button type="info" @click="removeDeflut">取消默认选中</el-button>
                        <el-button type="primary" @click="addIsOther">增加自定义填写的'其他'选项</el-button>
                    </el-form-item>
                </div>

            </el-form>
            <el-collapse v-if="!isDisabled">
                <el-divider><i class="el-icon-s-tools"></i></el-divider>
                <el-collapse-item title="更多设置..." name="foot" >
                    <el-form
                            ref="dataForm"
                            :model="item_que"
                            label-position="center"
                            label-width="120px"
                    >
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <el-form-item
                                        label="是否必填："
                                >
                                    <el-radio v-model="item_que.required" :label=0>否</el-radio>
                                    <el-radio v-model="item_que.required" :label=1>是</el-radio>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                        label="必填校验提示："
                                >
                                    <el-input v-if="item_que.required===1"
                                              v-model="item_que.errorMsg"
                                              type="text" placeholder="此题必选!" class="inputBox"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <el-form-item
                                        label="是否常用："
                                >
                                    <el-radio v-model="item_que.isCommon" :label=0>不常用</el-radio>
                                    <el-radio v-model="item_que.isCommon" :label=1>常用</el-radio>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                        label="状态："
                                >
                                    <el-radio v-model="item_que.status" :label=0>可用</el-radio>
                                    <el-radio v-model="item_que.status" :label=1>禁用</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-collapse-item>
            </el-collapse>
        </el-main>
    </el-container>
</template>

<script>
    import  {new_options}  from '@/utils/newQuestion'
    import { get, post } from '@/utils/httpUtil'
    export default {
        name: "item_radio",
        data() {
            return {
                item_que:JSON.parse(JSON.stringify(this.itemData)),
                new_option:JSON.parse(JSON.stringify(new_options)),
                deflutOp_show:{}
            }
        },
        props: {
            itemData:Object,
            isDisabled:Boolean,
            answerCount:Number,
            itemIndex:Number,
            moveUp:Function,
            moveDown:Function,
            delQuestion:Function,
            itemUpDataItem:Function,
        },
        computed: {
            haveOther(){
                let bb = false
                this.item_que.options.forEach((item, index) => {
                    if(item.isOther === 1){
                        bb =  true
                    }
                });
                return bb
            },
            op_Other(){
                let onlyOther = {}
                this.item_que.options.forEach((item, index) => {
                    if(item.isOther === 1){
                        onlyOther =  JSON.parse(JSON.stringify(item))
                    }
                });
                return onlyOther
            }
        },
        watch: {
            isDisabled: function(newVal){
                this.gotUpData()
            },
        },
        methods: {
            item_delQuestion(){
                this.delQuestion(this.itemIndex)
            },
            item_moveUp(){
                this.moveUp(this.itemIndex)
            },
            item_moveDown(){
                this.moveDown(this.itemIndex)
            },
            removeOp(item) {
                let index = this.item_que.options.indexOf(item);
                if (index !== -1) {
                    //是不是新问题
                    if(this.item_que.id){
                        if(item.id){
                            //是不是新选项
                            let data = {
                                id: item.id
                            }
                            post("/questionOptions/delById", data).then(response => {
                                if (response.result) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    this.item_que.options.splice(index, 1)
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: '删除失败!'+response.msg
                                    });
                                }
                            })

                        }else{
                            this.item_que.options.splice(index, 1)
                        }
                    }else{
                        this.item_que.options.splice(index, 1)
                    }
                }



            },
            deflutOp(item){
                let index = this.item_que.options.indexOf(item);
                this.item_que.options.forEach((item, index) => {
                    item.status=0
                });
                let deflutOp = this.item_que.options[index];
                if(deflutOp.isOther === 1){
                    this.$message({
                        message: '用户填写项不能设为默认',
                        type: 'warning'
                    });
                }else{
                    deflutOp.status=2;
                    this.$set(this.item_que.options,index,deflutOp)
                    this.deflutOp_show = deflutOp
                }
            },
            removeDeflut(){
                this.deflutOp_show ={}
                this.item_que.options.forEach((item, index) => {
                    item.status=0
                });
            },
            addOp() {
                let newOp = Object.assign({}, this.new_option);
                this.item_que.options.push(newOp);
            },
            addIsOther(){
                if(!this.haveOther){
                    let newOp = Object.assign({}, this.new_option);
                    newOp.isOther = 1;
                    newOp.label = '其他....';
                    this.item_que.options.push(newOp);
                }else{
                    this.$message({
                        message: '只能有一个用户填写的自定义项',
                        type: 'warning'
                    });
                }

            },
            gotUpData(){
                this.itemUpDataItem(this.itemIndex,this.item_que);
            }
        }

    }
</script>

<style scoped>
    .normal{
        width: 95%; margin-left:50px;background: #e3e3e3;border:1px solid #000;
    }
    .no_normal{
        width: 95%; margin-left:50px;background: #fff;border:1px solid #000;
    }
    .el-collapse-item__header{
        color: #7ac23c
    }
</style>
